<template>
	<view style="background-color: #ECECEC;width: 100%;height: 100%;">
		<!-- 头像 -->
		<view class="ava" @click="getUserInfo()">
			<image :src="ava"></image>
			<text>{{ userName }}</text>
			<text style="float: right; font-size: 24rpx;">当前位置：{{city}}</text>
		</view>
		<!-- 宫格 -->
		<view style="background-color: white;" class="gongge">
			<uni-grid :column="4" :showBorder="false" style="margin: auto;">
				<uni-grid-item>
					<image
						src="../../static/icon/dingdan.png"
						mode="aspectFill"
						style="width: 50rpx;height: 50rpx;"
					></image>
					<text>全部订单</text>
				</uni-grid-item>
				<uni-grid-item>
					<image
						src="../../static/icon/daifu.png"
						mode="aspectFill"
						style="width: 50rpx;height: 50rpx;"
					></image>
					<text>待付款</text>
				</uni-grid-item>
				<uni-grid-item>
					<image
						src="../../static/icon/shouhuo.png"
						mode="aspectFill"
						style="width: 50rpx;height: 50rpx;"
					></image>
					<text>待收货</text>
				</uni-grid-item>
				<uni-grid-item>
					<image
						src="../../static/icon/shouh.png"
						mode="aspectFill"
						style="width: 50rpx;height: 50rpx;"
					></image>
					<text>退款/售后</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 我的优惠券，我的地址 -->
		<view class="dizhi">
			<view class="youhui">
				<text>我的优惠券</text>
				<uni-icons
					type="arrowright"
					size="20"
					color="#B0B0B0"
				></uni-icons>
			</view>
			<view class="address">
				<text>我的地址</text>
				<uni-icons
					type="arrowright"
					size="20"
					color="#B0B0B0"
				></uni-icons>
			</view>
		</view>
		<view class="dizhi">
			<view class="lianxi">
				<text>联系商家</text>
				<uni-icons
					type="arrowright"
					size="20"
					color="#B0B0B0"
				></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//来装用户信息
			userName: null,
			ava: null,
			//装用户id key等
			id: null,
			city:null
		};
	},
	onLoad() {
		uni.getProvider({
			service: 'oauth',
			success: res => {
				console.log(res.provider);
				if (~res.provider.indexOf('weixin')) {
					uni.login({
						provider: 'weixin',
						success: loginRes => {
							console.log(loginRes);
							// 获取用户信息(打包以后改为getUserProfile)
							uni.getUserInfo({
								provider: 'weixin',
								// desc:"该信息用来获取您在本店的相关账户信息",
								success: infoRes => {
									console.log(
										'用户昵称为：' +
											infoRes.userInfo.nickName
									);
									console.log(
										'用户昵称为：' +
											infoRes.userInfo.avatarUrl
									);
									this.userName = infoRes.userInfo.nickName;
									this.ava = infoRes.userInfo.avatarUrl;
									console.log(this.userName);
								}
							});
						}
					});
				}
			}
		});

		// // 请求用户是否获取信息
		// uni.getUserProfile({
		// 	desc: '获取微信用户的昵称与头像',
		// 	success: (resp) => {
		// 		console.log(resp);
		// 		uni.login({
		// 			success: (res) => {
		// 				this.code = res.code;
		// 				console.log(res.code);
		// 				console.log(resp.userInfo.nickName) ;
		// 				this.userName = resp.userInfo.nickName;
		// 				this.ava = resp.userInfo.avatarUrl;
		// 				// console.log(this.userName);
		// 			},
		// 			fail: () => {
		// 				console.log(`调用失败`)
		// 			}
		// 		});
		// 	}
		// });
		// uni.authorize({
		// 	scope: 'scope.userInfo',
		// 	success: () => {
		// 		uni.getUserInfo({
		// 			provider: 'weixin',
		// 			// desc:"该信息用来获取您在本店的相关账户信息",
		// 			success: infoRes => {
		// 				console.log('用户昵称为：' + infoRes.userInfo.nickName);
		// 				console.log(
		// 					'用户昵称为：' + infoRes.userInfo.avatarUrl
		// 				);
		// 				this.userName = infoRes.userInfo.nickName;
		// 				this.ava = infoRes.userInfo.avatarUrl;
		// 				console.log(this.userName);
		// 			}
		// 		});
		// 	}
		// });

		// //获取地址
		// uni.getLocation({
		// 	type: 'wgs84',
		// 	geocode: true,
		// 	success: res => {
		// 		console.log('当前位置的经度：' + res.longitude);
		// 		console.log('当前位置的纬度：' + res.latitude);
		// 		console.log(res);
		// 	}
		// });

		// 地图(腾讯位置服务)
		var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');
		var qqmapsdk;
		qqmapsdk = new QQMapWX({
			key: 'ZZWBZ-VUXKX-YOD4T-7VGRN-QDBA2-5CBNZ'
		});
		qqmapsdk.reverseGeocoder({
			success:(res)=>{
				console.log(res.result.address_component.city);
				this.city=res.result.address_component.city
			}
		})
	},
	onShow() {},
	methods: {
		// getUserInfo() {
		// 	// 请求用户是否获取信息
		// 	uni.getUserProfile({
		// 		desc: '获取微信用户的昵称与头像',
		// 		success: resp => {
		// 			console.log(resp);
		// 			uni.login({
		// 				success: res => {
		// 					this.code = res.code;
		// 					console.log(res.code);
		// 					console.log(resp.userInfo.nickName);
		// 					this.userName = resp.userInfo.nickName;
		// 					this.ava = resp.userInfo.avatarUrl;
		// 					// console.log(this.userName);
		// 				},
		// 				fail: () => {
		// 					console.log(`调用失败`);
		// 				}
		// 			});
		// 		}
		// 	});
		// }
	}
};
</script>

<style lang="scss">
page {
	background-color: #ececec;
}
.dizhi {
	background-color: white;
	width: 95%;
	margin: auto;
	border-radius: 10rpx;
	margin-top: 30rpx;

	> .youhui {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid gray;
		> text {
			font-size: 28rpx;
			font-weight: 800;
			margin-left: 30rpx;
			line-height: 120rpx;
		}
		> uni-icons {
			margin-right: 30rpx;
			line-height: 120rpx;
		}
	}
	> .address {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		> text {
			font-size: 28rpx;
			font-weight: 800;
			margin-left: 30rpx;
			line-height: 120rpx;
		}
		> uni-icons {
			margin-right: 30rpx;
			line-height: 120rpx;
		}
	}
	> .lianxi {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		> text {
			font-size: 28rpx;
			font-weight: 800;
			margin-left: 30rpx;
			line-height: 120rpx;
		}
		> uni-icons {
			margin-right: 30rpx;
			line-height: 120rpx;
		}
	}
}
//宫格布局（描述订单等）
.gongge {
	margin-bottom: 12rpx;
	border-radius: 16rpx;
	width: 95%;
	margin: auto;
	font-size: 20rpx;
	position: relative;
	color: #939393;
	image {
		margin: auto;
		text-align: center;
	}
	text {
		position: absolute;
		text-align: center;
		top: 130rpx;
		left: 50rpx;
	}
}
// 头像部分
.ava {
	width: 80%;
	background-color: #ffffff;
	margin: auto;
	border-radius: 15rpx;
	padding: 30rpx;
	display: flex;
	vertical-align: middle;
	justify-content: space-around;
	> image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
		vertical-align: middle;
	}
	> text:first-child {
		line-height: 120rpx;
		font-weight: bold;
	}
}
</style>
